<template>
  <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black opacity-50" @click="close"></div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl z-10 p-6 w-full max-w-md">
      <h2 class="text-xl font-bold mb-4 dark:text-white">创建新群组</h2>
      
      <form @submit.prevent="createGroup">
        <div class="mb-4">
          <label for="group-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">群组名称</label>
          <input 
            id="group-name"
            v-model="form.name" 
            type="text" 
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
            placeholder="输入群组名称"
            required
          />
        </div>
        
        <div class="mb-4">
          <label for="group-description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">群组描述（选填）</label>
          <textarea 
            id="group-description"
            v-model="form.description" 
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
            placeholder="输入群组描述"
            rows="3"
          ></textarea>
        </div>
        
        <div class="mb-6">
          <label for="group-avatar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">群组头像</label>
          <EmojiAvatarPicker id="group-avatar" @select="setGroupAvatar" />
        </div>
        
        <div class="flex justify-end space-x-3">
          <button 
            type="button" 
            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
            @click="close"
          >
            取消
          </button>
          <button 
            type="submit" 
            class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            :disabled="isLoading"
          >
            {{ isLoading ? '创建中...' : '创建群组' }}
          </button>
        </div>
      </form>
      
      <div v-if="error" class="mt-3 text-red-500 text-sm">{{ error }}</div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { useToast } from 'vue-toastification';
import axios from 'axios';
import EmojiAvatarPicker from './EmojiAvatarPicker.vue';

export default {
  name: 'CreateGroupModal',
  components: {
    EmojiAvatarPicker
  },
  props: {
    isOpen: {
      type: Boolean,
      required: true
    }
  },
  emits: ['close', 'created'],
  setup(props, { emit }) {
    const toast = useToast();
    const isLoading = ref(false);
    const error = ref('');
    
    const form = reactive({
      name: '',
      description: '',
      group_avatar: '👥' // 默认群组头像
    });
    
    const setGroupAvatar = (emoji) => {
      // 如果是emoji格式，去除前缀后存储
      if (emoji.startsWith('emoji:')) {
        form.group_avatar = emoji.replace('emoji:', '');
      } else {
        form.group_avatar = emoji;
      }
    };
    
    const createGroup = async () => {
      if (!form.name.trim()) {
        error.value = '群组名称不能为空';
        return;
      }
      
      try {
        isLoading.value = true;
        error.value = '';
        
        const response = await axios.post('/api/groups', {
          name: form.name.trim(),
          description: form.description.trim(),
          group_avatar: form.group_avatar
        });
        
        toast.success('群组创建成功');
        emit('created', response.data);
        resetForm();
        emit('close');
      } catch (err) {
        console.error('创建群组失败:', err);
        error.value = err.response?.data?.message || '创建群组失败，请稍后重试';
        toast.error(error.value);
      } finally {
        isLoading.value = false;
      }
    };
    
    const resetForm = () => {
      form.name = '';
      form.description = '';
      form.group_avatar = '👥';
    };
    
    const close = () => {
      resetForm();
      error.value = '';
      emit('close');
    };
    
    return {
      form,
      isLoading,
      error,
      createGroup,
      setGroupAvatar,
      close
    };
  }
};
</script> 